const honorNavSpan = document.getElementById("nav-span");
const honorTabsContainer = document.querySelector(".tab-item-box")
const honorTabItems = document.querySelectorAll(".tab-item");
const honorListViews = document.querySelectorAll(".honor-list");
const honorContainer = document.querySelector(".honor-container");

let urlParams = new URLSearchParams(window.location.search);
let position = urlParams.get("position");
if (position) {
  position = decodeURIComponent(position);
  position = position.replace(/"/g, "");
  console.log(position);
  
  // 初始化
  honorTabItems.forEach(function (tab, index) {
    tab.classList.remove("active");
    if (index == position) {
      tab.classList.add("active");
      honorNavSpan.innerText = `> ${tab.innerText}`
    }
  });

  honorListViews.forEach(function (list) {
    list.classList.remove("show");
  });
  const showListId = `honor-list-${position}`;
  const showList = document.getElementById(showListId);
  showList.classList.add("show");
  honorContainer.scrollIntoView({
    behavior: "smooth",
    block: "start"
  })
}

honorTabItems.forEach(function (tabItem, index) {
  tabItem.addEventListener("click", function () {
    honorTabItems.forEach(function (tab) {
      tab.classList.remove("active");
    });
    honorListViews.forEach(function (list) {
      list.classList.remove("show");
    });
    const showListId = `honor-list-${index}`;
    const showList = document.getElementById(showListId);
    showList.classList.add("show");
    this.classList.add("active");
    honorNavSpan.innerText = `> ${tabItem.innerText}`;

    // 小屏增加点击滚动到中间
    if (window.innerWidth < 600) {
      // 获取视窗宽度和元素位置信息
      const viewportWidth = window.innerWidth;
      const itemRect = tabItem.getBoundingClientRect();

      // 计算需要滚动的距离
      const scrollLeft = honorTabsContainer.scrollLeft + itemRect.left - 
                       (viewportWidth / 2) + (itemRect.width / 2);

      // 滚动到计算出的位置
      honorTabsContainer.scrollTo({
          left: scrollLeft,
          behavior: 'smooth'
      });
    }
  });
});
